<template>
    <Header></Header>
    <!-- App Capsule -->
    <div id="appCapsule">
        <div class="section wallet-card-section pt-1">
            <div class="wallet-card">
                <!-- Balance -->
                <div class="balance">
                    <div class="left">
                        <span class="title">已学习</span>
                        <h1 class="total">{{ learnedWord }} 词</h1>
                    </div>
                    <div class="right">
                        <a href="#" class="button" data-bs-toggle="modal" data-bs-target="#cgBookActionSheet">
                          <img src="../assets/img/book1.png" alt="" style="width: 55px;">
                        </a>
                    </div>
                </div>
                <div class="wallet-footer">
                    <div class="item">
                        <div @click="navigate('/wordlist')">
                            <div class="icon-wrapper bg-danger">
                                <i class="ion ion-ios-list-box"></i>
                            </div>
                            <h4 class="font-weight-bold">单词表</h4>
                        </div>
                    </div>
                    <div class="item">
                        <a href="#" data-bs-toggle="modal" data-bs-target="#sendActionSheet">
                            <div class="icon-wrapper">
                                <i class="ion ion-ios-flag"></i>
                            </div>
                            <h4 class="font-weight-bold">已学习</h4>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#" data-bs-toggle="modal" data-bs-target="#exchangeActionSheet">
                            <div class="icon-wrapper bg-success">
                               <i class="ion ion-ios-create"></i>
                            </div>
                            <h4 class="font-weight-bold">未学习</h4>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#" data-bs-toggle="modal" data-bs-target="#exchangeActionSheet">
                            <div class="icon-wrapper bg-warning">
                                <i class="ion ion-ios-trending-up"></i>
                            </div>
                            <h4 class="font-weight-bold">学习计划</h4>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 更换词书的modal -->
        <div class="modal fade action-sheet" id="cgBookActionSheet" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">切换词书</h5>
                    </div>
                    <div class="modal-body">
                        <div class="action-sheet-content">
                            <form>
                                <div class="form-group basic">
                                    <div class="input-wrapper">
                                        <label class="label" for="account1">From</label>
                                        <select class="form-control custom-select" id="account1">
                                            <option value="0">高频词</option>
                                            <option value="1">马来语必背词典</option>
                                            <option value="2">考前500词</option>
                                        </select>
                                    </div>
                                </div>

                                <!-- <div class="form-group basic">
                                    <label class="label">Enter Amount</label>
                                    <div class="input-group mb-2">
                                        <span class="input-group-text" id="basic-addona1">$</span>
                                        <input type="text" class="form-control" placeholder="Enter an amount"
                                            value="100">
                                    </div>
                                </div> -->


                                <div class="form-group basic">
                                    <button type="button" class="btn btn-primary btn-block btn-lg"
                                        data-bs-dismiss="modal">切换</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="section mt-3">
          <div class="stat-box">
            <div class="title">学习进度</div>
            <div id="chartBallContainer" style="width: 100%; height: 150px;"></div>
            <div id="chartLineContainer" style="width: 100%; height: 150px;"></div>
          </div>
        </div>

        <!-- 学习模块 -->
        <div class="section my-2">
            <div class="row">
                <div class="col-6">
                    <div class="stat-box" @click="navigate('word2study')">
                        <div class="title">去学习</div>
                        <div class="value text-success">{{ word2learn }}</div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="stat-box" @click="navigate('word2review')">
                        <div class="title">去复习</div>
                        <div class="value text-danger">{{ word2review }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- * App Capsule -->
    <Footermenu></Footermenu>
</template>

<script>
import {computed, defineComponent, onBeforeMount, onMounted, ref} from "vue";
import Footermenu from "../components/Footermenu.vue";
import Header from "../components/Header.vue";
import * as echarts from 'echarts';
import 'echarts-liquidfill';
import axios from "../utils/axios-plugin.js";
import {useRouter} from "vue-router";
import {useStore} from "vuex";

const getUserStudyInfo = async () => {
  try {
    return await axios.post('/user/studyInfo')
  } catch (error) {
    const router_ = useRouter();
    router_.push('/login')
  }
}

function renderChart1(chart,rate) {
  const option = {
    series: [
      {
        type: 'liquidFill',
        data: [rate], // 设置水球图的填充比例
        radius: '80%',
        backgroundStyle: {
          color: 'rgba(0, 0, 0, 0)'
        },
        outline: {
          show: false
        },
        label: {
          show: true,
          fontSize: 24,
          color: '#FFB400',
          formatter: function (params) {
            return (params.value * 100).toFixed(0) + '%';
          }
        },
        itemStyle: {
          color: '#00a2ff',
          opacity: 0.6
        }
      }
    ]
  };
  chart.setOption(option);
}

function renderChart2(chart,monthAndDay,previousWordData) {
  const option = {
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        top:'30%',
        left: '5%',
        right: '5%',
        bottom: '5%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        axisTick:{
            alignWithLabel:true //保证刻度线和标签对齐
        },
        data: monthAndDay //x坐标的名称

      },
      yAxis: {
        type: 'value',
        splitNumber:4, //纵坐标数
        interval:250 //强制设置坐标轴分割间隔
      },
      series: [{
        name: '学习数',
        type: 'line', //折线图line;柱形图bar;饼图pie
        areaStyle: {
            //显示区域颜色---渐变效果
            color:{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#FFF5C7' // 0% 处的颜色
                }, {
                    offset: 1, color: '#ffffff' // 100% 处的颜色
                }],
                global: false // 缺省为 false
            }
        },
        itemStyle: {
          color: '#FFD400', //改变折线点的颜色
          lineStyle: {
          color: '#FFD400' //改变折线颜色
        }

      },
        data: previousWordData
      }]
    }
  chart.setOption(option)
}
 
export default defineComponent({
  name:'Index',
  components: {Header, Footermenu },
  setup(){

    const router = useRouter()
    const learnedWord = ref('');
    const totalWord = ref('');
    const word2learn = ref('');
    const word2review = ref('');
    let rate = 0;
    let monthAndDay = [];
    let previousWordData = [];

    onMounted(() => {
        //在挂载过程触发，把数据绑定到对应DOM
        getUserStudyInfo()
          .then(data =>{
              learnedWord.value = data['learned_word_num']
              totalWord.value = data['total_word_num']
              word2learn.value = data['2learn_word_num']
              word2review.value = data['2review_word_num']
              rate = (learnedWord.value / totalWord.value).toFixed(2)
              data.days_study.forEach(day=>{
                const dataObject = new Date(day.date);
                const month = dataObject.getMonth()+1;
                const dayOfMonth = dataObject.getDate();
                monthAndDay.push(month+'月'+dayOfMonth+'日');
                previousWordData.push(day.word_count);
              })
            })
            .then(()=>{
                const chartContainer1 = document.getElementById('chartBallContainer');
                const chartContainer2 = document.getElementById('chartLineContainer');
                chartContainer1.removeAttribute('_echarts_instance_')
                chartContainer2.removeAttribute('_echarts_instance_')
                const chart1 = echarts.init(chartContainer1);
                const chart2 = echarts.init(chartContainer2)
                renderChart1(chart1,rate)
                renderChart2(chart2,monthAndDay,previousWordData)
            })

    })
    function navigate(path){
      // 页面跳转的路径传入
      router.push(path)
    }

    return {
      learnedWord,
      totalWord,
      word2learn,
      word2review,
      navigate
    }
  }
})
</script>

<style lang="scss" scoped>
</style>